import clsx from "clsx";
import {Marker} from "./Marker.jsx";

const Button = ({
                    // eslint-disable-next-line react/prop-types
                    icon,
                    // eslint-disable-next-line react/prop-types
                    children,
                    // eslint-disable-next-line react/prop-types
                    href,
                    // eslint-disable-next-line react/prop-types
                    containerClassName,
                    // eslint-disable-next-line react/prop-types
                    onClick,
                    // eslint-disable-next-line react/prop-types
                    markerFill,
                }) => {
    const Inner = () => (
        <>
      <span className="relative flex items-center min-h-[60px] px-4 g4 rounded-2xl inner-before group-hover:before:opacity-100 overflow-hidden">
        <span className="absolute -left-[1px]">
          <Marker markerFill={markerFill} />
        </span>

          {icon && (
              <img
                  src={icon}
                  alt="circle"
                  className="size-10 mr-5 object-contain z-10"
              />
          )}

          <span className="relative z-2 font-poppins base-bold text-p1 uppercase">
          {children}
        </span>
      </span>

            <span className="glow-before glow-after" />
        </>
    );
    return href ? (
        <a
            className={clsx(
                "relative p-0.5 g5 rounded-2xl shadow-500 group",
                containerClassName,
            )}
            href={href}
        >
            <Inner />
        </a>
    ) : (
        <button
            className={clsx(
                "relative p-0.5 g5 rounded-2xl shadow-500 group",
                containerClassName,
            )}
            onClick={onClick}
        >
            <Inner />
        </button>
    );
};
export default Button;
